<!-- eslint-disable vue/valid-v-slot -->
<template>
  <a-table
    :data="tablists"
    :pagination="false"
    :loading="tableLoad"
    :bordered="{ wrapper: true, cell: tableBordered }"
    :stripe="(tableStriped as boolean)"
    :row-key="rowKey"
  >
    <template #columns>
      <a-table-column
        v-for="item of tableColumns.list"
        :key="item.key"
        align="left"
        :width="item.width"
        :title="(item.title as string)"
        :data-index="(item.key as string)"
        :ellipsis="true"
        :tooltip="true"
      >
        <template v-if="item.key === 'total'" #cell="{ record }">
          <a-space>
            <a-button size="small" type="text" class="butten" @click="detail(record.id, '')">
              {{ record.total }} 张
            </a-button>
          </a-space>
        </template>

        <template v-if="item.key === 'success'" #cell="{ record }">
          <a-space>
            <a-button size="small" type="text" class="butten" @click="detail(record.id, true)">
              {{ record.success }} 张
            </a-button>
          </a-space>
        </template>
        <template v-if="item.key === 'error'" #cell="{ record }">
          <a-space>
            <a-button size="small" type="text" class="butten" @click="detail(record.id, false)">
              {{ record.error }} 张
            </a-button>
          </a-space>
        </template>
        <template v-if="item.key === 'remarks'" #cell="{ record }">
          <a-space>
            {{ record.remarks ? record.remarks : '- - -' }}
          </a-space>
        </template>
      </a-table-column>
    </template>
  </a-table>
  <a-modal v-model:visible="visible" width="750px" hide-cancel>
    <template #title> 查看详情 </template>
    <div>
      <a-space>
        <a-button
          type="outline"
          v-permission="exportUrls"
          status="warning"
          :loading="loadings"
          @click="exportExcelList"
        >
          <template #icon>
            <icon-send />
          </template>
          <!-- Use the default slot to avoid extra spaces -->
          <template #default>导出</template>
        </a-button>
      </a-space>
      <CardNo
        v-if="exportNamess == 0"
        style="margin-top: 20px"
        :tablist="cardList"
        :load="cardLoading"
      />
      <a-table
        v-if="exportNamess == 1"
        style="margin-top: 20px"
        :bordered="{ wrapper: true, cell: tableBordered }"
        :stripe="(tableStriped as boolean)"
        :loading="cardLoading"
        :data="cardList"
        :pagination="false"
        :column-resizable="true"
        :rowKey="rowKey"
        :columns="tableColumns.cardList"
        table-layout-fixed
        hide-expand-button-on-empty
        :default-expand-all-rows="true"
        :scroll="scroll"
      >
        <template #columns>
          <a-table-column
            v-for="item of tableColumns.cardList"
            :key="item.key"
            align="left"
            :title="(item.title as string)"
            :width="item.width"
            :data-index="(item.key as string)"
            :fixed="item.fixed"
            :ellipsis="true"
            :tooltip="true"
          >
            <template v-if="item.key === 'userName'" #cell="{ record }">
              <div
                style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
                v-if="record.userName"
                >{{ record.userName }}</div
              >
              <div v-else>- - - - </div>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <TableFooter ref="tableFooterRef" :pagination="paginations" />
    </div>
    <template #footer>
      <a-space />
    </template>
  </a-modal>
</template>

<script lang="ts">
  import { useRowKey, useTable, usePagination } from '@/hooks/table'
  import { defineComponent, reactive, ref, toRef, watch } from 'vue'
  import { get } from '@/api/http'
  import useCommonStore from '@/store/modules/common'
  import CardNo from './cardNo.vue'
  export default defineComponent({
    name: 'CardTable',

    components: {
      CardNo,
    },
    props: {
      tablist: {
        type: Array,
        require: true,
      },
      load: {
        type: Boolean,
        require: true,
      },
      bordered: {
        type: Boolean,
        require: true,
      },
      striped: {
        type: Boolean,
        require: true,
      },
      url: {
        type: String,
        require: true,
      },
      exportUrl: {
        type: String,
        require: true,
      },
      exportName: {
        type: String,
        require: true,
      },
      nameski: {
        type: Number,
      },
    },
    emits: ['list'],
    setup(props, { emit }) {
      const scroll = {
        x: 1000,
      }
      console.log(props.nameski)
      const tempTableProps = toRef(props, 'tablist')
      const tempTablePropsLoad = toRef(props, 'load')
      const tempTablePropsBordered = toRef(props, 'bordered')
      const tempTablePropsStriped = toRef(props, 'striped')
      const tempTablePropsUrl = toRef(props, 'url')
      const tempTablePropsExportUrl = toRef(props, 'exportUrl')
      const tempTablePropsExportName = toRef(props, 'exportName')
      const tempTablePropsExportNames = toRef(props, 'nameski')
      const rowKey = useRowKey('id')
      const table = useTable()
      const tableLoad = ref(true)
      const loadings = ref(false)
      const tableBordered = ref(false)
      const tableStriped = ref(false)
      const urls = ref()
      const exportUrls = ref()
      const exportNames = ref()
      const exportNamess = ref()
      const cardList: any = ref([])
      const cardLoading = ref(false)
      const paginations = usePagination(cardListFn)
      const id = ref()
      const success = ref()
      const visible = ref(false)
      const userCommon = useCommonStore()

      const tablists: any = ref([
        {
          id: 3,
          name: '测试',
        },
      ])
      const tableColumns: any = reactive({
        list: [
          {
            title: '操作人',
            key: 'adminName',
            dataIndex: 'adminName',
            align: 'center',
            checked: true,
            width: 120,
          },
          {
            title: '客户账号',
            key: 'userName',
            dataIndex: 'userName',
            align: 'center',
            checked: true,
            width: 130,
          },
          {
            title: '操作数量',
            key: 'total',
            dataIndex: 'total',
            align: 'center',
            checked: true,
            width: 120,
          },
          {
            title: '成功数量',
            key: 'success',
            dataIndex: 'success',
            align: 'center',
            checked: true,
            width: 120,
          },
          {
            title: '失败数量',
            key: 'error',
            dataIndex: 'error',
            align: 'center',
            checked: true,
            width: 120,
          },
          {
            title: '备注信息',
            key: 'remarks',
            dataIndex: 'remarks',
            align: 'center',
            checked: true,
            width: 120,
          },
          {
            title: '操作时间',
            key: 'createTime',
            dataIndex: 'createTime',
            align: 'center',
            checked: true,
            width: 190,
          },
        ],
        lists: [
          {
            title: '客户账号',
            key: 'userName',
            dataIndex: 'userName',
            align: 'center',
            checked: true,
            width: 130,
          },
          {
            title: '操作数量',
            key: 'total',
            dataIndex: 'total',
            align: 'center',
            checked: true,
            width: 120,
          },
          {
            title: '成功数量',
            key: 'success',
            dataIndex: 'success',
            align: 'center',
            checked: true,
            width: 120,
          },
          {
            title: '失败数量',
            key: 'error',
            dataIndex: 'error',
            align: 'center',
            checked: true,
            width: 120,
          },
          {
            title: '备注信息',
            key: 'remarks',
            dataIndex: 'remarks',
            align: 'center',
            checked: true,
            width: 120,
          },
          {
            title: '操作时间',
            key: 'createTime',
            dataIndex: 'createTime',
            align: 'center',
            checked: true,
            width: 190,
          },
        ],
        cardList: [
          {
            title: '显示卡号',
            key: 'card',
            dataIndex: 'card',
            align: 'center',
            checked: true,
            width: 120,
          },
          {
            title: '旧客户账号',
            key: 'userName',
            dataIndex: 'userName',
            align: 'center',
            checked: true,
            width: 120,
          },
        ],
      })

      const exportExcelList = () => {
        loadings.value = true
        userCommon
          .downLoads(
            exportUrls.value,
            { parentId: id.value, success: success.value },
            exportNames.value
          )
          .then(() => {
            loadings.value = false
          })
          .catch(() => {
            loadings.value = false
          })
      }
      function cardListFn(value?: number) {
        cardLoading.value = true
        if (value) {
          paginations.page = value
        }
        get({
          url: urls.value,
          data: {
            parentId: id.value,
            success: success.value,
            page: paginations.page,
            size: paginations.pageSize,
          },
        }).then((res) => {
          cardLoading.value = false
          cardList.value = res.data.list
          paginations.setTotalSize((res.data as any).totalSize)
          return res
        })
      }

      const detail = async (val: any, val1: any) => {
        await (cardList.value = [])
        await (id.value = val)
        await (success.value = val1)
        await cardListFn(1)
        await (visible.value = true)
      }

      watch(
        [
          () => tempTablePropsLoad.value,
          () => tempTableProps.value,
          () => tempTablePropsBordered.value,
          () => tempTablePropsStriped.value,
          () => tempTablePropsUrl.value,
          () => tempTablePropsExportUrl.value,
          () => tempTablePropsExportName.value,
          () => tempTablePropsExportNames.value,
        ],
        (oldVal) => {
          emit('list', tableColumns.list)
          tableLoad.value = oldVal[0]
          tablists.value = oldVal[1]
          tableBordered.value = oldVal[2]
          tableStriped.value = oldVal[3]
          urls.value = oldVal[4]
          exportUrls.value = oldVal[5]
          exportNames.value = oldVal[6]
          exportNamess.value = oldVal[7]
          if (oldVal[7] === 1) {
            tableColumns.list = tableColumns.lists
          }
        }
      )
      return {
        exportNamess,
        rowKey,
        tableColumns,
        table,
        tablists,
        tableLoad,
        tableBordered,
        tableStriped,
        urls,
        exportUrls,
        cardList,
        paginations,
        cardLoading,
        visible,
        detail,
        cardListFn,
        exportExcelList,
        loadings,
        success,
        exportNames,
        props,
        scroll,
      }
    },
  })
</script>

<style lang="less" scoped></style>
